<template>
  <el-header class="navbar">
    <div class="nav-container">
      <!-- Logo/Title -->
      <div class="nav-left">
        <span class="logo">观影系统</span>
      </div>

      <!-- 中间导航菜单 (可以按需添加更多) -->
      <div class="nav-menu">
        <router-link to="/home" class="nav-item" :class="{ 'active': isActive('/home') }">首页</router-link>
        <router-link to="/coming-soon" class="nav-item" :class="{ 'active': isActive('/coming-soon') }">即将上映</router-link>
        <router-link v-if="userStore.isLoggedIn" to="/orders" class="nav-item" :class="{ 'active': isActive('/orders') }">我的订单</router-link>
        <!-- 可以添加其他链接，如 正在热映、即将上映 等 -->
      </div>

      <!-- 右侧用户区域 -->
      <div class="nav-right">
        <template v-if="!userStore.isLoggedIn">
          <router-link to="/login" class="nav-button login-btn">登录</router-link>
          <router-link to="/register" class="nav-button register-btn">注册</router-link>
        </template>
        <el-dropdown v-else @command="handleCommand">
          <span class="el-dropdown-link">
            欢迎, {{ userStore.user?.username }} <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">个人中心</el-dropdown-item>
              <el-dropdown-item v-if="userStore.isAdmin" command="admin">管理后台</el-dropdown-item>
              <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </el-header>
</template>

<script setup lang="ts">
import { computed } from 'vue' // 移除 onMounted, ref
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue' // 导入图标
import { useUserStore } from '../store/user'
// 移除 useCartStore, useBookStore

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
// 移除 cartStore, bookStore, isRefreshing

// 检查当前路由是否匹配
const isActive = (path: string) => {
  // 可以改进为匹配父路由，例如 /movie/* 也算激活首页？取决于需求
  return route.path === path
}

// 移除 onMounted 和 refreshHome

const handleCommand = (command: string | number | object) => {
  if (command === 'profile') {
    router.push('/profile');
  } else if (command === 'admin') {
      router.push('/admin');
  } else if (command === 'logout') {
    logout();
  }
}

const logout = () => {
  ElMessageBox.confirm('确定要退出登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logout()
    ElMessage.success({
      message: '已退出登录',
      duration: 1000
    })
    // 退出后跳转到登录页，或者首页也可以
    router.push('/login')
  }).catch(() => {
    // 用户取消
  })
}
</script>

<style scoped>
.navbar {
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 999;
  height: 60px; /* 固定高度 */
}

.nav-container {
  max-width: 1200px; /* 调整最大宽度 */
  margin: 0 auto;
  display: flex; /* 改为 Flex 布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

.nav-left .logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #409EFF;
    text-decoration: none;
}

/* 移除 welcome-section 相关样式 */

.nav-menu {
  display: flex;
  align-items: center;
}

.nav-item {
  margin: 0 15px; /* 调整间距 */
  color: #606266;
  text-decoration: none;
  cursor: pointer;
  padding: 0 5px;
  position: relative;
  line-height: 57px; /* 调整行高使下划线位置合适 */
  transition: all 0.3s;
  font-size: 1rem; /* 调整字体大小 */
}

.nav-item:hover {
  color: #409EFF;
}

.nav-item.active {
  color: #409EFF;
  font-weight: 600; /* 加粗 */
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #409EFF;
}

.nav-right {
  display: flex;
  align-items: center;
}

.nav-button {
    margin-left: 10px;
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background-color 0.3s, color 0.3s;
}
.login-btn {
    color: #409EFF;
    border: 1px solid #409EFF;
}
.login-btn:hover {
    background-color: #ecf5ff;
}
.register-btn {
    color: #fff;
    background-color: #409EFF;
    border: 1px solid #409EFF;
}
.register-btn:hover {
    background-color: #66b1ff;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  color: #606266;
  font-size: 0.95rem;
}
.el-dropdown-link:hover {
    color: #409EFF;
}

/* 移除旧按钮样式 */
</style>